<template>
	<view>
		<view>
			<u-navbar :is-back="true" :is-fixed="true" title="会员余额" title-color="#000" back-icon-color="#5f6161"
				:back-text-style="{color: '#5f6161'}" back-icon-name="nav-back" back-text="返回">
				<view class="slot-wrap">
					<view class="navbar-right">
						<view class="dot-box right-item" @click="openPage('/pages/ucp/store-manage/store-manage')">
							<text class="wrap-text">明细</text>
							<u-icon name="list-dot" color="#5f6161" size="32"></u-icon>
						</view>
					</view>
				</view>
			</u-navbar>
		</view>

		<uni-view class="u-demo-wrap">
			<uni-view class="u-demo-title">
				<u-icon name="rmb-circle-fill" color="#a2750d" size="68"></u-icon>
			</uni-view>
			<uni-view class="u-demo-area">
				<text class="balance golden" v-if="user.store">{{user.store.balance}}</text>
				<!-- <view><text>车险基金: {{user.non_withdrawable_balance}}</text></view> -->
				<!-- <view><text>推广收入: {{(user.balance-user.non_withdrawable_balance).toFixed(2)}}</text></view> -->
			</uni-view>
		</uni-view>

		<template>
			<view class="u-padding-30" v-if="shop.withdraw_introduction">
				<u-alert-tips type="warning" :title="rule.title" :description="shop.withdraw_introduction"></u-alert-tips>
			</view>

			<view style="padding:0 30rpx;">
				<label class="u-border-bottom" style="font-weight: 600;">
					<view class="tips">到账方式</view>
					<view style="text-align: right;flex: 1;">银联线下打款</view>
				</label>
				<label class="u-border-bottom">
					<view class="tips">* 开户人</view>
					<input type="text" v-model="form.receive_holder_name" placeholder="请填写正确的姓名" />
				</label>
				<label class="u-border-bottom">
					<view class="tips">* 开户行</view>
					<input type="text" v-model="form.receive_bank" placeholder="请输入正确的银行名称" />
				</label>
				<label class="u-border-bottom">
					<view class="tips">* 账号</view>
					<input type="number" v-model="form.receive_account" placeholder="请输入正确的银行账号" />
				</label>
			</view>


			<view class="u-padding-30">
				<u-button type="success" :disabled="user.store.balance<=0" @click="submitWithdraw">申请提现</u-button>
			</view>
		</template>

		<!-- <view class="u-padding-30">
			<u-button type="warning" :disabled="user.balance<=0" @click="balancePaymentCode">付款码</u-button>
		</view> -->
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
		<u-toast ref="uToast" />
		<!-- <u-popup v-model="showPaymentCode" mode="bottom" @close="getUserInfo" length="60%">
			<view class="u-text-center payment-code-box">
				<view class="code-title">中勘石油微商城*余额付款码</view>
				<u-image width="80%" height="400rpx" :src="balancePay.barcode" mode="aspectFit"></u-image>
				<view>请在失效前使用，失效倒计时</view>
				<u-count-down :timestamp="180"></u-count-down>
				<view style="color:red;padding:20rpx;">提示：余付支付仅限于支付会员本人的订单</view>
			</view>
		</u-popup> -->
		<u-modal v-model="showWithdrawConfirm" @confirm="confirmWithdraw" :content="shop.withdraw_introduction" :show-cancel-button="true" ref="uModal" cancel-text="取消" confirm-text="确认提现" :mask-close-able="true">

		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rule: {
					title: '提现说明',
					description: ''
				},
				shop: {},
				user: {},
				showPaymentCode: false,
				showWithdrawConfirm: false,
				balancePay: {},
				form:{
					receive_holder_name:'',
					receive_bank:'',
					receive_account:''
				}
			}
		},
		onShow() {
			this.getUserInfo();
			this.getShop();
		},
		onPullDownRefresh(){
			this.getUserInfo();
		},
		methods: {
			openPage(jumpURL) {
				this.$u.route({
					type: 'to',
					params: {},
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
				}).catch(e => {
					console.log(e)
				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			submitWithdraw() {
				if(!this.form.receive_account || !this.form.receive_bank || !this.form.receive_holder_name){
					return alert('请填写收款银行账户信息')
				}
				if (this.user.store.balance > 0) {
					this.showWithdrawConfirm = true;
				}
			},
			confirmWithdraw() {
				this.$u.post('/store-manage/submit-withdraw', {
					withdraw_amount: this.user.store.balance,
					receive_holder_name:this.form.receive_holder_name,
					receive_bank:this.form.receive_bank,
					receive_account:this.form.receive_account
				}).then(res => {
					this.getUserInfo()
					this.showWithdrawConfirm = false
					this.$refs.uToast.show({
						title: '提交成功，等待处理',
						type: 'success'
					})
				}).catch(e => {
					console.log(e)
				})
			}
		}
	}
</script>

<style lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: flex-end;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		color: #5f6161;
	}

	.u-demo-wrap {
		border-bottom: 1px dashed #ddd;
		background-color: #fafafa;
		padding: 20px 10px;
		border-radius: 3px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
  .u-demo-wrap .balance{
     font-size: 66rpx;
  }
	.payment-code-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.code-title{
		padding: 30rpx;
		font-weight: bold;
		font-size: 40rpx;
		box-sizing: border-box;
	}

	label{
		display: flex;
		// border-bottom: 1px solid #dbdbdb;
		margin-bottom: 18rpx;
		padding:18rpx 0;
	}

	input {
		text-align: left;
		// margin-bottom: 10rpx;
		// padding-bottom: 6rpx;
	}

	input[short]{
		width:4em;
	}


	.tips {
		color: $u-type-info;
		// margin-bottom: 44rpx;
		// margin-top: 18rpx;
		color: #02396a;
		width: 7em;
	}
</style>
